<template>
	<om-page :title="pageTitle">
		<view class="om_hd_fix">
			<uni-search-bar 
			bgColorCls="bg-steelblue" 
			cancelColor="text-white"
			 :focus="true" 
			 placeholder="输入姓名" 
			 @confirm="confirm"></uni-search-bar>
		</view>
		<view class="page__bd" style="padding-top: 100rpx;">
	    <uni-list v-if="commonData.datas">
	    	<view v-for="(item, index) in commonData.datas" :key="index">
	    		<uni-list-item
	    			showArrow
	    			:title="item.avatar?(item.id === userId ? '我' : item.username):(item.id === userId ? '我' : item.username.substr(1, item.username.length))"
	    			:avatar="item.username.substr(0, 1)"
	    			:thumb="item.avatar"
	    			:avatarBgColor="logoColors.length?logoColors[item.id%logoColors.length].name:''"
	    			@click="infoTab(item,index)"
	    			:note="item.mobile && item.workMobile ? item.mobile + ', ' + item.workMobile : item.mobile ? item.mobile : ''"
	    			:extraText="item.posname ? item.posname : ''"
	    		></uni-list-item>
	    	</view>
	    </uni-list>
	  </view>
	  <tui-loadmore :visible="commonData.loadding"></tui-loadmore>
	  <tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
	  <tui-scroll-top refs="" :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import listLoad from '@/static/js/listLoad.js';
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js'
	export default {
		data() {
			return {
				logoColors: [],
				scrollTop: 0,
				page:1,
				rows:20,
				dateStr:"",
				searchStr:"",
				commonData: {
					datas:[]
				},
				dataMap:{},
				pageTitle:"搜索",
				url:'',
				cachename:'',
				msg:"",
				totalList:[]
			}
		},
		computed: {
			...mapState(useLoginUserStore, ['userId']),
		　　datas() {
		　　　　return this.commonData.datas
		　　}
		},
		watch: {
			searchStr(newValue,oldValue){
				let _that = this
				_that.page = 1
				_that.commonData.datas = []
				_that.totalList = []
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				})
			},
		　　datas(newValue, oldValue) {
				let _that = this
				if(newValue){
					newValue.forEach((item)=>{
						_that.dataMap[item.id] = item
					})
				}
		　　}
		},
		created: function () {
		  this.initData = this._.debounce(this.initData, 300)
		},
		methods: {
			confirm(e){
				let _that = this
				if (e.value) {
				  if (!_that.searchStr || (_that.searchStr && _that.searchStr != e.value.trim())) {
					_that.searchStr = e.value.trim()
					_that.initData(this.page,this.rows)
				  }
				} else {
				  _that.searchClear()
				}
			},
			initData(page,rows){
				let _that = this
				let param = {
					dateStr:_that.dateStr,
					searchStr: _that.searchStr,
					page:page,
					rows:rows,
				}
				_that.om.request(this.url,param).then(res=>{
					if(res.rows.length){
						for(let item of res.rows){
							this.totalList.push(item)
						}
						_that.commonData.datas = this.totalList
						res.rows.forEach((item)=>{
							_that.dataMap[item.id] = item
						})
					}else{
						_that.om.toast(_that.msg)
					}
				})
			},
			searchClear() {
				this.commonData = {}
			 },
			 infoTab(item,index) {
				// var pages = getCurrentPages();//当前页
				// var beforePage = pages[pages.length - 2];//上个页面
			 	uni.setStorage({
			 		key:this.cachename ,
			 		data: item
			 	});
			 	uni.navigateBack({
			 	})
			 }
		},
		onLoad(options) {
			 let title = "搜索"
			uni.setNavigationBarTitle({
			  title: title
			})
			this.logoColors = this.CuColorList
			this.url = options.url
			this.cachename = options.cachename
			this.msg = options.msg
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			listLoad.pullDownRefresh(this)
		},
		
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if(this.commonData.datas.length == (this.page *  this.rows)){
				this.page += 1
				this.initData(this.page,this.rows)
			}
		}
	}
</script>

<style>

</style>
